<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>友情商品详情页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="icon" href="img/京东-01.png">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/clearBoth.css">
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/mycar.css">
    <link rel="stylesheet" href="./css/detials.css">
    <style>
        .dibu {
            overflow: hidden;
            height: 85px;
            background: #111b24;
            font-size: 12px;
            color: #9699a8;
            line-height: 24px;
            text-align: center;
            width: 100%;
            padding-top: 20px;
        }

        .top {
            width: 100%;
            height: 60px;
            background-color: #83cbac;
        }

        .top span {
            height: 60px;
            line-height: 60px;
            float: left;
            margin-left: 100px;
            font-size: 16px;
        }

        .top ul {
            float: right;
            width: 1000px;
            height: 60px;
            line-height: 60px;
        }

        .top li {
            float: left;
            width: 200px;
            height: 60px;
            text-align: center;
            font-size: 16px;
        }

        .top ul a {
            float: left;
            width: 200px;
            height: 60px;
        }

        .top ul li:hover a {
            background-color: #1a6840;
            color: white;
        }
    </style>
</head>

<body>
    <!-- 顶部导航 -->
    <div class="top">
        <span style="cursor: pointer;">京东</span>
        <ul>
            <li class="login">
                <a href="登录.html">登录</a>
            </li>
            <li class="register">
                <a href="注册.html">注册</a>
            </li>
            <li>
                <a href="我的订单.html">我的订单</a>
            </li>
            <li>
                <a href="我的京东.html">我的京东</a>
            </li>
            <li>
                <a href="list.html">商品列表</a>
            </li>
        </ul>
    </div>
    <!-- 搜索部分 -->
    <div class="carSearch">
        <div class="carSearch_c">
            <div class="carSearch_logo">
                <a href="首页.html"><img src="img/logo.png" alt=""></a>
            </div>
            <div class="myCar">
                <a href="我的订单.html" class="car">
                    <span class="iconfont icon-gouwuchekong ">
                </a>
            </div>
        </div>
    </div>
    <!-- 列表导航 -->
    <div class="list_nav">
        <div class="list_nav_c">
            <ul>
                <li><a href="首页.html">首页</a></li>
                <li>&gt;</li>
                <li><a href="list.html">列表</a></li>
                <li>&gt;</li>
                <li><a>当前</a></li>
            </ul>
        </div>
    </div>
    <!-- 商品部分 -->
    <div class="goods_details clear">
        <div class="goods_details_c">
            <!-- 放大镜部分 -->
            <div class="zoom floatLeft">
                <div class="middle">
                    <img src="https://img13.360buyimg.com/n7/jfs/t1/209349/25/10498/164687/619e1d8eEa80568c5/fc1e131e5e2d6fa7.jpg"
                        alt="">
                    <div class="big"><img
                            src="https://img13.360buyimg.com/n7/jfs/t1/209349/25/10498/164687/619e1d8eEa80568c5/fc1e131e5e2d6fa7.jpg"
                            alt=""></div>
                    <div class="shade"></div>
                </div>
                <ul class="small">
                    <li class="active"><img
                            src="https://img13.360buyimg.com/n7/jfs/t1/209349/25/10498/164687/619e1d8eEa80568c5/fc1e131e5e2d6fa7.jpg"
                            alt=""></li>
                    <li class=""><img
                            src="https://img13.360buyimg.com/n7/jfs/t1/209349/25/10498/164687/619e1d8eEa80568c5/fc1e131e5e2d6fa7.jpg"
                            alt=""></li>
                    <li class=""><img
                            src="https://img13.360buyimg.com/n7/jfs/t1/209349/25/10498/164687/619e1d8eEa80568c5/fc1e131e5e2d6fa7.jpg"
                            alt=""></li>
                    <li class=""><img
                            src="https://img13.360buyimg.com/n7/jfs/t1/209349/25/10498/164687/619e1d8eEa80568c5/fc1e131e5e2d6fa7.jpg"
                            alt=""></li>
                </ul>
            </div>
            <!-- 商品详情介绍 -->
            <div class="goods_case">
                <div class="goods_case_tit">商品名称</div>
                <div class="goods_case_active">
                    【11月1日-11月3日】11.11开门红狂欢，全场每满200-30，可叠加店铺优惠，享6期免息，即刻加入购物车下单【赠送运费险】优先顺丰发货。<a>查看></a>
                </div>
                <div class="J_atmosphere_banner">
                    <img src="https://img10.360buyimg.com/umm/jfs/t1/108260/24/18897/32758/615566faE9371adfe/ee7993ab6d5d4c09.png"
                        alt="">
                </div>
                <div class="goods_case_price">
                    <div class="summary_price">
                        <div>京东价</div>
                        <div>¥<span class="currentprice">500</span></div>
                        <div>降价通知</div>
                        <div>
                            <p>累计评价</p>
                            <p><b>100+</b></p>
                        </div>
                    </div>
                    <div class="summary_coupon">
                        <div><a>优惠券</a></div>
                        <div><a>每满200减30</a></div>
                        <div><a>满10减</a>5</div>
                    </div>
                </div>
                <div class="summary_appreciation">
                    <div><a>增值业务</a></div>
                    <div><i></i><a>旧衣回收，一元换礼</a></div>
                </div>
                <div class="summary_delivery">
                    <div>配送至</div>
                    <div>
                        <select name="" id="">
                            <option value="">北京昌平区百善镇</option>
                        </select>
                    </div>
                    <div><span><a>有货</a></span><span><a>支持</a></span></div>
                </div>
                <div class="summary_color">
                    <div>选择颜色</div>
                    <ul>
                        <li><a></a></li>
                        <li><a></a></li>
                        <li><a></a></li>
                        <li><a></a></li>
                        <li><a></a></li>
                    </ul>
                </div>
                <div class="summary_size">
                    <div>选择尺码</div>
                    <ul>
                        <li><a>105/L</a></li>
                        <li><a>110/XL</a></li>
                        <li><a>115/XXL</a></li>
                        <li><a>120/3XL</a></li>
                        <li><a>95/S</a></li>
                        <li><a>125/4XL</a></li>
                        <li><a>100/M</a></li>
                    </ul>
                </div>
                <div class="summary_safeguard">
                    <div><a>增值保障</a></div>
                    <div><a>年意外换新，¥29.00</a>半</div>
                    <div><a>意外破洞保，¥7.9</a></div>
                </div>
                <div class="summary_server">
                    <div><a>京东服务</a></div>
                    <div><a>洗衣2件，¥46.00</a></div>
                    <div><a>裤长改短1件，¥15.00</a></div>
                    <div><a>鞋靴修复翻新，¥46.00</a></div>
                </div>
                <div class="summary_bar">
                    <div><a>白条分期</a></div>
                    <div><a>不分期</a></div>
                    <div><a>3期</a></div>
                    <div><a>6期</a></div>
                    <div><a>12期</a></div>
                    <div><a>24期</a></div>
                </div>
                <div class="summary_to_car" style="float:left;">
                    <a class="addCart">加入购物车</a>
                </div>
                <div class="summary_to_car" style="float:left;">
                    <a href="我的订单.html" style="color:#fff;">去购物车结算</a>
                </div>
            </div>
            <!-- 商品扩展 -->
            <div class="goods_extend">
                <div class="goods_extend_tit">
                    <ul>
                        <li class="goods_extend_tit_active">商品介绍</li>
                        <li>价格与包装</li>
                        <li>售后保障</li>
                        <li>商品评价</li>
                        <li>本店好评商品</li>
                    </ul>
                </div>
                <div class="goods_extend_content">
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="dibu">
        <p>周帅帅集团能力有限公司</p>
        <p>周帅帅著</p>
        <p>京ICP备12003911号-6 &nbsp Copyright &copy2013-2019</p>
    </div>
</body>
<script src="./js/jquery-3.6.0.js"></script>
<script src="./js/layer/dist/layer.js"></script>
<script src="./js/general.js"></script>
<script src="./js/utils.js"></script>
<script src="detail.js"></script>

<script>
    var span = document.querySelector('.top span')
    span.onclick = function () {
        location.href = '首页.html'
    }

    function getCookie(key) {
        var cookie = document.cookie;
        var arr = cookie.split('; ')
        for (var i = 0; i < arr.length; i++) {
            var brr = arr[i].split('=')
            if (brr[0] === key) {
                return brr[1]
            }
        }
    }
    var username = getCookie('username')
    console.log(username);

    // var sex = getCookie('sex')
    // console.log(sex);

    function setCookie(key, value, seconds) {
        var date = new Date()
        date.setTime(date.getTime() + seconds * 1000 - 8 * 3600 * 1000)
        document.cookie = key + '=' + value + ';expires=' + date
    }
    // 将cookie中的用户名显示在页面上
    if (username) {
        // 显示在页面上
        var loginLi = document.querySelector('.login');
        loginLi.innerHTML = `
    <a href="">欢迎尊贵的${username}</a>
    `

        var registerLi = document.querySelector('.register');
        registerLi.innerHTML = `
        <a href="javascript:;" class="logout">登出</a>
    `

        // 登出
        document.querySelector('.logout').onclick = function () {
            loginLi.innerHTML = `
            <a href="登录.html">登录</a>
        `
            registerLi.innerHTML = `
            <a href="注册.html">注册</a>
        `

            // 删除cookie - 重新设置cookie - 将失效的时间日期对象设置在上一秒
            setCookie('username', null, -1)
        }
    }
</script>

</html>